import { AddIcon, MinusIcon } from '@chakra-ui/icons';
import {
  Flex,
  Tag,
  TagCloseButton,
  TagLabel,
  Tooltip,
  useColorModeValue,
} from '@chakra-ui/react';

import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';

import { setNegativePromptTags, setPromptTags } from '../../store/tagSlice';

export type SelectedTagType = {
  key: string;
  weight: number;
};

const TagItem = (props: { tag: SelectedTagType; type?: string }) => {
  const { promptTags, negativePromptTags } = useAppSelector(
    (store) => store.tag
  );
  const dispatch = useAppDispatch();
  const tag = props.tag;
  const isNegative = props.type === 'negative';
  const borderC = useColorModeValue('#6c9da6', '#4f6e73');
  const n_borderC = useColorModeValue('#c97f7f', '#634b4b');
  const b_c = isNegative ? n_borderC : borderC;

  const handleRemoveItem = () => {
    if (isNegative) {
      dispatch(
        setNegativePromptTags(
          negativePromptTags.filter((i) => i.key !== tag.key)
        )
      );
    } else {
      dispatch(setPromptTags(promptTags.filter((i) => i.key !== tag.key)));
    }
  };

  const updateTag = (newTag: SelectedTagType) => {
    if (isNegative) {
      const index = negativePromptTags.findIndex(
        (i: SelectedTagType) => i.key === tag.key
      );
      const newNegativePromptTags = negativePromptTags.slice();
      newNegativePromptTags.splice(index, 1, newTag);
      dispatch(setNegativePromptTags(newNegativePromptTags));
    } else {
      const index = promptTags.findIndex(
        (i: SelectedTagType) => i.key === tag.key
      );
      const newPromptTags = promptTags.slice();
      newPromptTags.splice(index, 1, newTag);
      dispatch(setPromptTags(newPromptTags));
    }
  };

  const handleAddWeight = () => {
    const weight = tag.weight + 1;
    updateTag(Object.assign({}, tag, { weight }));
  };
  const handleMinusWeight = () => {
    const weight = tag.weight - 1;
    updateTag(Object.assign({}, tag, { weight }));
  };
  return (
    <Tag
      colorScheme={isNegative ? 'red' : 'cyan'}
      key={tag.key}
      borderRadius="full"
      mt="1"
      ml="1"
    >
      <TagLabel fontSize="sm" fontWeight="600">
        {tag.key}
      </TagLabel>
      <Flex
        ml="2"
        h="full"
        align="center"
        border="1px"
        borderColor={b_c}
        px="1"
        py="0.5"
        rounded="full"
        gap="1.5"
      >
        <Tooltip hasArrow placement="top" label="降低权重" fontSize="md">
          <MinusIcon
            opacity="0.6"
            _hover={{
              opacity: '1',
            }}
            cursor="pointer"
            fontSize="xs"
            onClick={handleMinusWeight}
          />
        </Tooltip>
        <Tooltip hasArrow placement="top" label="增加权重" fontSize="md">
          <AddIcon
            opacity="0.6"
            _hover={{
              opacity: '1',
            }}
            cursor="pointer"
            fontSize="xs"
            onClick={handleAddWeight}
          />
        </Tooltip>
      </Flex>
      <TagCloseButton onClick={handleRemoveItem} />
    </Tag>
  );
};

export default TagItem;
